<template>
	<view class="header-wrap">
		<view class="container">
			<view class="filter-container">
				<view v-for="(item, index) in selections" :key="index" style="display: -webkit-inline-box;">
					<view @click="checkSelectBtn(index)">
						<view class="title-wrap">{{item}}</view>
						<view :class="selectIndex==index+1?'bottom_bg':null"></view>
					</view>
					<image class="address_down.png" src="../images/list/download.png" mode=""></image>

				</view>
			</view>
			<scroll-view scroll-y="true" class="data-container" ref="listContent" @scrolltolower="loadMore()"
				:refresher-triggered="refresh" refresher-enabled="true" style="height: 95vh;"
				@refresherrefresh="onRefresh">
			<!-- <scroll-view scroll-y="true" class="data-container" ref="listContent" @scrolltolower="loadMore()" style="height: 95vh;"> -->
				<view style=" padding-top: 60rpx;" v-if=" (!listDatas || listDatas.length == 0)">
					<bh-no-more></bh-no-more>
				</view>
				<view v-for="(data, index) in listDatas" :key="index">
					<view @click="checkDetail(data.id)" class="item-all">
						<view class="item-container">
							<image class="item-img" :src="data.userDto.avatarUrl"></image>
							<view style="flex: 1;">
								<view class="item-time">{{data.createTimeDesc}}</view>
								<view class="item-title">求租{{data.city}}{{data.street}}的店铺</view>
								<view class="item-address-area">
									<view>期望区域:</view>
									<view class="lebal">{{data.street}}</view>
									<view>租金预算:</view>
									<view class="lebal">{{data.lowerRent}}~{{data.upperRent}}</view>
								</view>
								<view class="item-address-area">
									<view>求租面积:</view>
									<view class="area">{{data.lowerAcreage}}~{{data.upperAcreage}}</view>
									<view>米</view>
								</view>
							</view>
						</view>
						<view class="item-connect-type">
							<view style="flex: 1;text-align: center;padding-top: 14rpx;padding-bottom: 18rpx">打电话</view>
							<view style="flex: 1;text-align: center;padding-top: 14rpx;padding-bottom: 18rpx">给他留言
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部加载 -->
			<!-- 	<div class="list-footer" v-if="listDatas.length>=1">
				<div class="load-more" @click="loadMore">{{loadMoreText}}</div>
			</div> -->
		</view>
		<!-- 蒙版 -->
		<view class="black-bg" v-if="showPromp" @click="closeModel">

		</view>
		<!-- <MoneyAreaPopup 
		:dataList='getMoneyAreaDataList'
		@changeData="getMoneyAreaChageSelect"
		></MoneyAreaPopup> -->
		<!-- 租金和面积-->
		<view class="top-rent-money" v-if="showPromp==4">
			<view class="rent-pomp-title1">
				选择一
			</view>
			<view class="rent-item-content">
				<view v-for="(item, index) in rentList" :key="index"
					:class="selectRentMoneyIndex==index?'rent-money-item-active':'rent-money-item'"
					@click="checkSelectRentMoneyBtn(index)">
					{{item.name}}
				</view>
			</view>
			<view class="rent-pomp-title1">
				自定义
			</view>
			<view class="rent-money-custom">
				<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number" v-model="low" />
				<view>至</view>
				<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number" v-model="high" />
			</view>
			<view class="btn-bottom" style="display: flex;">
				<view class="rent-btn" style="margin-right: 100rpx;" @click="settingRentMoneyArgs(false)">取消</view>
				<view class="rent-btn-sure" @click="settingRentMoneyArgs(true)">确定</view>
			</view>
		</view>

		<!-- 面积-->
		<view class="top-rent-money" v-if="showPromp==3">
			<view class="rent-pomp-title1">
				选择一
			</view>
			<view class="rent-item-content">
				<view v-for="(item, index) in acreageList" :key="index"
					:class="selectRentMoneyIndex==index?'rent-money-item-active':'rent-money-item'"
					@click="checkSelectRentMoneyBtn(index)">
					{{item.name}}
				</view>
			</view>
			<view class="rent-pomp-title1">
				自定义
			</view>
			<view class="rent-money-custom">
				<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number" v-model="low" />
				<view>至</view>
				<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number" v-model="high" />
			</view>
			<view class="btn-bottom" style="display: flex;">
				<view class="rent-btn" style="margin-right: 100rpx;" @click="settingRentMoneyArgs(false)">取消</view>
				<view class="rent-btn-sure" @click="settingRentMoneyArgs(true)">确定</view>
			</view>
		</view>

		<!-- 行业 -->
		<view class="top-rent-industry" v-if="showPromp==1">
			<view v-for="(item, index) in industryTypeList" :key="index"
				:class="selectRentMoneyIndex==index?'rent-industry-item-active':'rent-industry-item'"
				@click="checkSelectRentMoneyBtn(index)">
				<view>
					{{item.name}}
				</view>
				<image v-if="selectRentMoneyIndex==index"
					style="width: 28rpx;height: 20rpx;padding-top: 10rpx;padding-right: 4rpx;"
					src="../images/list/success.png"></image>

			</view>
			<view class="btn-bottom" style="display: flex;margin-top: 10rpx;">
				<view class="rent-btn" style="margin-right: 100rpx;" @click="settingRentMoneyArgs(false)">取消</view>
				<view class="rent-btn-sure" @click="settingRentMoneyArgs(true)">确定</view>
			</view>
		</view>
	</view>
	<show-area-street-top-sheet :show="showAreaStreetSheet" v-if="showPromp==2" :current-dto="postDto"
		@close="showAreaStreetSheetClose" @confirm="showAreaStreetConfirm">

	</show-area-street-top-sheet>
</template>

<script lang="ts">
	import ref from 'vue'
	import bhNoMore from '../../components/custom_views/bh-no-more.vue';
	import { getDefaultPostDto } from '@/components/post_item/post_add_sell_dto';
	import { Dict } from '../../components/custom_views/dict';
	import showAreaStreetTopSheet from '../../components/custom_views/show-area-street-top-sheet.vue';
	import { showAreaStreetSheetMixin } from '../../components/custom_views/show-area-street-sheet-mixin'
	import {
		Api
	} from '../../api/api';
	const components_custom_views_dict = require("../../components/custom_views/dict.js");
	import MoneyAreaPopup from '../../components/custom_views/money-area-popup.vue';
	import { CustomDict } from '../../components/custom_views/custom_dict';
	const components_custom_views_custom_dict = require("../../components/custom_views/custom_dict.js");
	export default {
		components: {

			bhNoMore,
			showAreaStreetTopSheet

		},
		mixins: [showAreaStreetSheetMixin,],
		data() {
			return {
				...showAreaStreetSheetMixin.initData,
				postDto: getDefaultPostDto(Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value),
				industryTypeList: CustomDict.customDictList(Dict.IndustryTypeEnum),
				acreageList: components_custom_views_custom_dict.CustomDict.acreageList,
				rentList: components_custom_views_custom_dict.CustomDict.rentList,
				selections: ['行业', '区域', '面积', '租金'],
				moneyAreaDataList: [],
				selectIndex: null,
				selectRentMoneyIndex: null,
				showPromp: 0, //展示弹窗
				lowerRentMin: 0,
				upperRentMax: 1000000,
				lowerAcreage: 0,
				upperAcreage: 10000,
				industryId: '',
				low: null,
				high: null,
				pageNum: 1,
				pageSize: 10,
				listDatas: [],
				showAreaStreetSheet: true,
				refresh: false,
				noMoreData: false,//判断更多数据
			}
		},
		computed: {
			// getMoneyAreaDataList() {
			// 	if (this.selectIndex == 3) {
			// 		this.moneyAreaDataList = this.rentAreaList
			// 	} else if (this.selectIndex == 4) {
			// 		this.moneyAreaDataList = this.rentMoneyList
			// 	}
			// 	return this.moneyAreaDataList
			// }
		},
		methods: {
			//加载列表数据
			initApiData() {
				this.checkSelect()
				let params = {}
				params['industryId'] = this.industryId
				params['lowerRentMin'] = this.lowerRentMin
				params['upperRentMax'] = this.upperRentMax
				params['lowerAcreageMin'] = this.lowerAcreage
				params['upperAcreageMax'] = this.upperAcreage
				params['areaCode'] = this.postDto.areaCode
				params['street'] = this.postDto.street
				params['pageNum'] = this.pageNum
				params['pageSize'] = this.pageSize
				// Api.PostSellApi.list(查询条件)   根据条件筛选。
				/** 分页查询转店列表 */
				Api.PostBuyApi.list(params, (res) => {
					if (res.code == 200) {
						let listData = res.data.records;
						this.listDatas = [...this.listDatas, ...listData];
						this.page += 1;
						//  如果请求到的数据小于pageSize，说明已经没有更多数据，可以停止加载

						if (listData.length < this.pageSize) {
							this.noMoreData=true
						}
					}
				})
			},
			onRefresh() {
				this.refresh = true;
				uni.showToast({
					title: "下拉刷新",
					duration: 1500,
					icon: "none"
				})
				// 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
				this.pageNum=1;
				this.listDatas=[]
				this.initApiData()
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			},
			//加载更多
			loadMore() {
				if (!this.noMoreData) {
					this.initApiData();
				}
			},
			closeModel() {
				this.showPromp = null
				this.showAreaStreetSheet = false
			},
			showAreaStreetConfirm(postFieldData : any) {
				Object.assign(this.postDto, postFieldData)
				this.showAreaStreetSheet = false
				console.log(this.postDto.area + "点击" + this.postDto.street)
				this.initApiData()
			},
			//点击头部导航栏
			checkSelectBtn(index : number) {
				this.selectIndex = index + 1
				console.log(index + "点击")
				this.showPromp = index + 1
				if (this.selectIndex == 2) {
					this.showAreaStreetSheet = true
				} else {
					this.showAreaStreetSheet = false
				}
				if (this.selectRentMoneyIndex) {
					this.selectRentMoneyIndex = null
				}
				// if (index == 3) {
				// 	this.moneyAreaDataList = this.rentAreaList
				// } else if (index == 4) {
				// 	this.moneyAreaDataList = this.rentMoneyList
				// }

			},
			//请求前清理参数
			checkSelect() {
				switch (this.selectIndex) {
					case 1:
						this.lowerRentMin = 0
						this.upperRentMax = 1000000
						this.lowerAcreage = 0
						this.upperAcreage = 10000
						this.postDto.area = ''
						this.postDto.areaCode = ''
						this.postDto.street = ''
						break;
					case 2:
						this.lowerRentMin = 0
						this.upperRentMax = 1000000
						this.lowerAcreage = 0
						this.upperAcreage = 10000
						this.industryId = ''

						break;
					case 3:
						this.lowerRentMin = 0
						this.upperRentMax = 1000000
						this.postDto.area = ''
						this.postDto.areaCode = ''
						this.postDto.street = ''
						this.industryId = ''
						break;
					case 4:
						this.lowerAcreage = 0
						this.upperAcreage = 10000
						this.postDto.area = ''
						this.postDto.areaCode = ''
						this.postDto.street = ''
						this.industryId = ''
						break;
				}
			},
			//点击租金项
			checkSelectRentMoneyBtn(index : Number) {
				this.selectRentMoneyIndex = index
				console.log(index + "点击项")
			},
			settingRentMoneyArgs(selectSetting : Boolean) {
				this.showPromp = 0
				if (selectSetting) {
					console.log(this.low + "点击项" + this.high)
					if (this.selectIndex == 1) {//行业
						this.industryId = this.industryTypeList[this.selectRentMoneyIndex].value
					} else if (this.selectIndex == 2) {//区域

					} else if (this.selectIndex == 3) {///面积
						if (this.low && this.high) {
							this.lowerAcreage = this.low
							this.upperAcreage = this.high
						} else if (this.selectRentMoneyIndex) {
							console.log("改变面积", this.selectRentMoneyIndex);
							let rentAreaAry = this.acreageList[this.selectRentMoneyIndex].value.split("-");
							this.lowerAcreage = rentAreaAry[0];
							this.upperAcreage = rentAreaAry[1];
						}
					} else if (this.selectIndex == 4) {//租金
						if (this.low && this.high) {
							this.lowerRentMin = this.low
							this.upperRentMax = this.high
						} else if (this.selectRentMoneyIndex) {
							console.log("改变月租金", this.selectRentMoneyIndex);
							let rentAry = this.rentList[this.selectRentMoneyIndex].value.split("-");
							this.lowerRentMin = rentAry[0];
							this.upperRentMax = rentAry[1];
						}
					}

					this.initApiData()
				} else {
					this.low = null
					this.high = null
					this.selectRentMoneyIndex = null
				}

			},
			getMoneyAreaChageSelect(changeData : any) {
				this.showPromp = 0
				console.log('点击的changeData信息', changeData)
				this.initApiData()
			},
			changeAcreage(e) {
				console.log("改变面积", e);
				let acreageAry = this.acreageList[e.detail.value].value.split("-");
				this.postDto.lowerAcreage = acreageAry[0];
				this.postDto.upperAcreage = acreageAry[1];
			},
			changeRent(e) {
				console.log("改变月租金", e);
				let rentAry = this.rentList[e.detail.value].value.split("-");
				this.postDto.lowerRent = rentAry[0];
				this.postDto.upperRent = rentAry[1];
			},
			//跳转详情---后续加上data参数
			checkDetail(id) {
				uni.navigateTo({
					url: "/PostPage/post_detail_buy/post_detail_buy?postId=" + id
				})
			},
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad() {
			this.initApiData()
		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() { },
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() { },
		// 页面周期函数--监听页面隐藏
		onHide() { },
		// 页面周期函数--监听页面卸载
		onUnload() { },
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	page {
		height: 100vh;
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		height: 100vh;
	}

	/* 普通按钮 */
	button {
		// padding: 10px 20px;
		// border: 1px solid #ddd;
		// background: #fff;
		// cursor: pointer;
		font-size: x-small;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	/* 点击后添加阴影 */
	button:active {
		// box-shadow: 1px 1px 3px yellow;
		background: #ffffff;
	}

	/* 点击后添加阴影 */
	button::after {
		// box-shadow: 1px 1px 3px yellow;
		border: none;
	}

	.title-wrap {
		margin-top: 9px;
		margin-left: 18px;
		font-size: 18px;
	}

	.btn-select-lebal {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		background: #ECF0F1;

		.btn-select {
			margin-right: 10rpx;

		}
	}

	.bottom_bg {
		width: 24px;
		height: 4px;
		margin-left: 24px;
		background: #F8D247;
	}

	.address_down.png {
		width: 16rpx;
		height: 10rpx;
		margin-top: 34rpx;
	}

	.filter-container {
		display: flex;
		justify-content: space-between;
		padding-right: 20rpx;
		padding-left: 20rpx;
		font-size: smaller;
		height: 44px;
		background: white;
	}

	.item-connect-type {
		display: flex;
	}

	.data-container {
		.item-all {
			margin: 16rpx 16rpx 40rpx 16rpx;
			background: white;
		}

		.item-container {
			display: flex;

			border-radius: 4px;
		}

		.item-img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 104rpx;
			margin-top: 22rpx;
			margin-left: 16rpx;
			margin-right: 20rpx;
		}

		.item-time {
			height: 12px;
			opacity: 1;
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 12px;
			font-weight: normal;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			font-feature-settings: "kern" on;
			color: #999999;
			text-align: end;
			padding-top: 24rpx;
			padding-right: 24rpx;
		}

		.item-title {
			font-size: 16px;
			font-weight: bolder;
		}

		.item-address-area {
			display: flex;
			font-size: 12px;

			.lebal {
				margin-right: 30rpx;
				font-weight: bolder;
			}

			.area {
				color: #EF2D2D;
			}
		}



		.item-lebal {
			padding: 8rpx 12rpx;
			font-size: 24rpx;
			font-weight: 500;
			background: #F5F6F6;
			margin-right: 10px;
		}

		.item-price {
			color: red;
		}
	}

	.black-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 70rpx;
		background: rgba(0, 0, 0, 0.45);

	}

	.top-rent-industry {
		z-index: 9999;
		height: 850rpx;
		top: 70rpx;
		position: absolute;
		background: white;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 0rpx 32rpx 48rpx 32rpx;
		width: -webkit-fill-available;

		.rent-industry-item {
			background: #FFFFFF;
			box-sizing: border-box;
			height: 88rpx;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: left;
			padding-left: 20rpx;
			padding-top: 24rpx;
			letter-spacing: 0px;
			color: #333333;
			border-bottom: 1px dashed;
			font-size: 14px;
			font-weight: normal;
			line-height: 20px;
			letter-spacing: 0px;
			color: #666666;
		}

		.rent-industry-item-active {
			background: #FFFFFF;
			box-sizing: border-box;
			height: 88rpx;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: left;
			padding-left: 20rpx;
			padding-top: 24rpx;
			letter-spacing: 0px;
			color: #333333;
			border-bottom: 1px dashed;
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 0.85);
		}

		.rent-btn {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}

		.rent-btn-sure {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}
	}

	.top-rent-money {

		z-index: 9999;
		height: 500rpx;
		top: 70rpx;
		position: absolute;
		background: white;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 48rpx 32rpx 48rpx 32rpx;
		width: -webkit-fill-available;

		.checkItem {}

		.rent-item-content {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
		}

		.rent-money-item {
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			height: 64rpx;
			width: 144rpx;
			border-radius: 16px;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			padding-top: 12rpx;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
		}

		.rent-money-item-active {
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			height: 64rpx;
			width: 144rpx;
			border-radius: 16px;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			padding-top: 12rpx;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
		}

		.rent-money-custom {
			display: flex;
			align-items: baseline;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.low {
			width: 73px;
			height: 36px;
			border-radius: 4px;
			opacity: 1;
			box-sizing: border-box;
			border: 1px solid #333333;
			text-align: center;
		}

		.rent-btn {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}

		.rent-btn-sure {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}
	}

	.list-footer {
		padding: 40rpx;
		text-align: center;
		position: absolute;
		bottom: 30rpx;
		right: 20rpx;
		left: 20rpx;
		display: flex;
		justify-content: center;
	}

	.load-more {
		cursor: pointer;
	}
</style>